<template>
      <div id="hz">
            <div class="title">合作流程</div>
            <div class="subtitle">在线提交您的需求，我们将在24小时内联系您,，节假日除外</div>
            <div class="content">
                  <div class="item" v-for="(item, index) in list" :key="index">
                        <div class="left">
                              <div class="box">
                                    {{ item.name }}
                              </div>
                              <div class="txt">
                                    {{ item.txt }}
                              </div>
                        </div>
                        <div class="right" v-if="index < 4">
                              <img src="../../assets/img/jt.png" alt="">
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    name: "填写申请表",
                                    txt: "填写申请表格，24小时之内渠道经理会与您联系"
                              },
                              {
                                    name: "对接经理",
                                    txt: "与渠道经理沟通项目内容，了解市场和移动支付的发展情况"
                              },
                              {
                                    name: "实地考察",
                                    txt: "亲临蜜蜂付支付考察，了解项目具体情况"
                              },
                              {
                                    name: "确认合作",
                                    txt: "与蜜蜂付支付签署合作协议"
                              },
                              {
                                    name: "开展业务",
                                    txt: "开通合作帐号，回到当地市场开展业务推广"
                              }

                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#hz {
      width: 100%;
      margin-top: 80px;
      margin-bottom: 50px;
      .title {
            font-size: 30px;
            text-align: center;
      }
      .subtitle {
            font-size: 16px;
            text-align: center;
            margin: 10px 0;
      }
      .content {
            padding-top: 50px;
            width: 1440px;
            margin: 0 auto;
            display: flex;
            align-items: flex-start;
             justify-content: center;
            .item {
                  width: 250px;
                  display: flex;
                  align-items: flex-start;
                  .left {
                        .box {
                              width: 195px;
                              height: 195px;
                              overflow: hidden;
                              background: url("../../assets/img/radial.png") 0  0 no-repeat;
                              background-size: 100% 100%;
                              display: flex;
                              flex-direction: column;
                              justify-content: center;
                              align-items: center;
                              box-sizing: border-box;
                              font-size: 24px;
                              color: #2B40CC;
                        }
                        .txt {
                              width: 195px;
                              font-size: 16px;
                              margin: 10px 0;
                              text-align: center;
                        }
                  }
                  .right {
                        height: 195px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                  }
            }
      }
}
</style>